html,
body {
  height: 100dvh;
}

body {
  background-color: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  transition: all 0.4s;
  font-family: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
  font-weight: 600;

  main {
    display: flex;
    flex-direction: column;
    isolation: isolate;

    section {
      display: none;
      flex-direction: column;
      overflow: auto;
      align-items: center;
      width: 100%;

      &.view {
        display: flex;
      }

    }
  }

  @media(orientation:landscape) {
    >header {
      width: 20%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2%;
      background: var(--onBg);
      border-radius: 0 calc(var(--roundness) * 1.5) calc(var(--roundness) * 1.5) 0;
    }

    main {
      height: 100%;
      width: 80%;
      margin: auto;

      section {
        height: 100%;
        animation: fromBelow 0.2s cubic-bezier(0.19, 1, 0.22, 1);
      }
    }
  }

  @media(orientation:portrait) {
    flex-direction: column-reverse;

    >header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column-reverse;
      background: var(--onBg);
      border-radius: calc(var(--roundness) * 1.5) calc(var(--roundness) * 1.5) 0 0;
      border-top: var(--border);
    }


    main {
      height: 100%;
      width: 100%;

      section {
        height: calc(93dvh - 3.2rem);
        animation: fromRight 0.2s cubic-bezier(0.19, 1, 0.22, 1);
      }
    }
  }

}
